<template>
    <div>
        <!--工具条 -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 20px;">
            <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" icon="serch" @click="handleEdit" style="float:right;">异动申请</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <!--列表 -->
        <el-table :data="tableData" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="index" width="100" prop="stuId" lable="编号">
            </el-table-column>

            <el-table-column prop="studentName" label="学生姓名">
            </el-table-column>

            <el-table-column prop="transactionRequest" label="申请类型">
            </el-table-column>

            <el-table-column prop="transactionCurrState" label="申请状态">
            </el-table-column>

            <el-table-column prop="transactionApplyDateStr" label="申请日期" sortable>
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span>{{ scope.row.transactionApplyDateStr }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="transactionStartStr" label="批准日期" sortable>
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span>{{ scope.row.transactionStartStr }}</span>
                </template>
            </el-table-column>

        </el-table>
        <!--分页组件-->
        <el-col :span="24" class="toolbar">
            <el-pagination style="float:right;"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[10, 15, 20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </el-col>

        <!--增加界面-->
        <el-dialog title="异动申请" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
                <el-form-item label="申请主题：" prop="transactionRequest">
                    <!--用的select的选择器，进行选择。(郭伟修改 8.7) -->
                    <!--申请时间直接去掉了，在后台让他自动获取当前时间，显示在页面上 8.7-->
                    <el-select v-model="editForm.transactionRequest" placeholder="请选着申请" size="130%">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <!--申请时间直接去掉了，在后台让他自动获取当前时间，显示在页面上（郭伟修改8.)-->
                <el-form-item label="申请原因：" prop="transactionText">
                    <!--修改为了文本域(郭伟 8.11)-->
                    <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="editForm.transactionText">
                    </el-input>
                </el-form-item>


                <el-form-item label="申请时长：" prop="transactionLong">
                    <el-input v-model="editForm.transactionLong" auto-complete="off" placeholder="请输入天数"></el-input>
                </el-form-item>
               <!--修改 郭伟8.9-->
                <el-form-item label="上传：">
                    <my-upload buttonName="请假或休学请上传证明材料" @selectedFile="selectedFile"></my-upload>
                    <el-tag :type="file.type">{{file.fileName}}</el-tag>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit">保存</el-button>
            </div>
        </el-dialog>
    </div>


</template>


<script>
    import {cha, addChange} from '../../api/api';
    import myUpload from '../public/myUpload.vue';
    export default {
        components: {myUpload},
        data() {
            return {
                //用的select的选择器，进行选择。(郭伟修改8.6)

                options: [{
                    value: '休学',
                    label: '休学'
                }, {
                    value: '请假',
                    label: '请假'
                }],

                tableData: [],
                id: '',
                name: '',
                total: 0,//列表总条数
                pageSize: 10,//每页条数
                currentPage: 1,//当前页码
                dialogVisible: false,
                listLoading: false,
                sels: [],//列表选中列
                editFormVisible: false,//增加申请界面是否显示
                editLoading: false,


                //增加申请界面数据
                editForm: {
                    transactionRequest: '',
                    transactionText: '',
                    transactionLong: ''
                },

                editFormRules: {
                    transactionRequest: [
                        {required: true, message: '请输入申请类型', trigger: 'blur'}
                    ],
                    transactionText: [
                        {required: true, message: '请输入申请原因', trigger: 'blur'}
                    ],
                    transactionLong: [
                        {required: true, message: '请输入申请时长', trigger: 'blur'}
                    ],
                },

                file: {
                    type: '',
                    fileName: '',
                    fileData: ''
                },
            }
        },

        methods: {
            //获取用户列表
            getData() {
                    let para = {
                        studentId: this.studentId,
                        pageNo: this.currentPage,
                        pageSize: this.pageSize
                    };
                this.loading = true;
                cha(para).then((res) => {
                    //alert(para.studentId + "22");
                    this.loading = false;
                    this.tableData = res.resData.list;
                    this.total = res.resData.total;
                    this.pageSize = res.resData.pageSize;
                });
            },
            //显示增加申请界面
            handleEdit: function (index, row) {
                this.editForm.transactionApplyDateStr = new Date();
                this.editFormVisible = true;
            },

//            选取文件事件
            selectedFile(file){
                this.file.fileName = file.name;
                this.file.type = "success";
                this.file.fileData = file;
                console.log(file);
            },

            //申请提交
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        if(this.file.fileData != ''){
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                                this.editLoading = true;
                                //NProgress.start();
                                let para = new FormData();
                                para.append("file", this.file.fileData);
                                para.append("transactionRequest", this.editForm.transactionRequest);
                                para.append("transactionText", this.editForm.transactionText);
                                para.append("transactionLong", this.editForm.transactionLong);

                                addChange(para).then((res) => {
                                    this.editLoading = false;
                                    let {resCode}=res;
                                    if(resCode!=0){
                                        this.$message({
                                            message: '失败',
                                            type: 'error'
                                        });
                                    }else {
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                    }
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    this.getData();
                                });
                            });

                        }
//                       this.$confirm('确认提交吗？', '提示', {}).then(() => {
//                            this.editLoading = true;
//                            //NProgress.start();
//                            let para = Object.assign({}, this.editForm);
//                            addChange(para).then((res) => {
//                                this.editLoading = false;
//                                this.$message({
//                                    message: '提交成功',
//                                    type: 'success'
//                                });
//                                this.$refs['editForm'].resetFields();
//                                this.editFormVisible = false;
//                                this.getData();
//                            });
//                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },

            // 分页组件
            handleSizeChange(val) {
                this.pageSize = val;
                console.log('每页 ${val} 条');
                this.getData();
            },
            handleCurrentChange(val) {
                console.log('当前页：${val}');
                this.currentPage = val;
                this.getData();
            },
        },
        mounted() {
            this.getData();
        }
    };
</script>